<template>
    <div class="natural_readWord">
        <Header :isGoBack="false" style="background: rgba(38, 125, 255,0.8);">
            <template v-slot:right>
                <div class="btn" @click="$goRouter('naturalSpellCenter', $route.query)">返回学习中心</div>
            </template>
        </Header>
        <div class="natural_readWord_center">
            <div class="natural_readWord_content">
                <div class="title">
                    见词能读
                    <span class="feedback">反馈</span>
                </div>
                <div class="content">
                    <div class="soundmark">
                        <!-- <span>Bb [bi:] &nbsp;</span>
                        <img src="../../../assets/img/naturalSpell/play.png" alt=""> -->
                        点击
                        <img src="../../../assets/img/naturalSpell/play.png" alt="">
                        听读音
                    </div>
                    <div class="demo" v-loading="!currentWord.content">
                        <img class="topic" :src="currentWord.img" alt="">
                        <div class="soundmark_content">
                            <span class="soundmark_demo">{{ currentWord.content }}</span>
                            <!-- <img src="../../../assets/img/naturalSpell/play.png" alt=""> -->
                            <AudioPlay class="fr click" ref="audioPlay" :type="1" :audioSrc="baseURL + currentWord.audio"
                                @onIsPlay="onIsPlayWord"></AudioPlay>
                        </div>
                        <span class="word_text" v-html="currentWord.parse"></span>
                    </div>
                    <div v-if="btnFlag" class="btn_group">
                        <div class="btn_yes" @click="updateWordStrange(1)">
                            <img src="../../../assets/img/naturalSpell/yes.png" alt="">
                        </div>
                        <div class="btn_no" @click="updateWordStrange(0)">
                            <img src="../../../assets/img/naturalSpell/no.png" alt="">
                        </div>
                    </div>
                    <div @click="countDownFun" v-if="playNumber > 0 && !btnFlag" class="btn_group">
                        <div class="number">
                            <span class="text">{{ playNumber }}</span>
                            <img src="../../../assets/img/naturalSpell/btn.png" alt="">
                        </div>
                    </div>
                    <div v-if="nextBtnFlag" class="btn_group">
                        <div class="number" @click="nextTopic">
                            <img src="../../../assets/img/naturalSpell/next.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <!-- <div class="text">
                        <P>例句: The teddybearwas his favourite plaything. </P>
                        <p>软毛玩具熊是他最心爱的玩具</p>
                    </div>
                    <div class="img">
                        <img src="../../../assets/img/naturalSpell/play.png" alt="">
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from "@/components/Header";
import AudioPlay from "@/components/AudioPlay";
import { getReadWordList, getWordUnit, updateWordStrange } from "@/api/naturalSpell.js"
import { throttle } from "@/utils/utils";
export default {
    name: 'EnglishWebIndex',
    components: {
        Header,
        AudioPlay
    },
    data() {
        return {
            btnFlag: true,
            playNumber: 2,
            nextBtnFlag: false,
            checkedData: null,
            wordList: [],
            currentWord: {
                img: '',
                content: ''
            },
            currentIndex: 0,
            isPlay: false,
            groupList: [],
            groupIndex: 0
        };
    },

    mounted() {

    },
    created() {
        console.log(localStorage.getItem("spellCheckedData"));
        this.checkedData = JSON.parse(localStorage.getItem("spellCheckedData"));
        this.getWordUnit()
    },
    methods: {
        countDownFun: throttle(function () {
            this.playNumber -= 1
            if (this.playNumber <= 0) {
                this.nextBtnFlag = true
            }
            this.playAudio("audioPlay");
        }, 2000),
        async nextTopic() {
            this.btnFlag = true
            this.playNumber = 2
            this.nextBtnFlag = false
            this.currentIndex += 1
            if (this.currentIndex >= this.wordList.length) {
                this.groupIndex += 1
                if (this.groupIndex >= this.groupList.length) {
                    this.$alert('该词组已学习完毕返回学习中心', '提示', {
                    confirmButtonText: '确定',
                    callback: (action) => {
                        this.$goRouter('naturalSpellCenter', this.$route.query)
                        console.log(action);
                    }
                });
                }
                this.currentIndex = 0
                this.getReadWordList(this.groupList[this.groupIndex].id)
            } else {
                this.currentWord = this.wordList[this.currentIndex]
                await this.$nextTick();
                this.playAudio("audioPlay");
            }
        },
        // 更新题目状态
        updateWordStrange: throttle(async function (isStrange) {
            const data = {
                id: this.currentWord.id,
                classify: 1,
                isStrange
            }
            await updateWordStrange(data)
            if (isStrange) {
                this.nextTopic()
            } else {
                this.btnFlag = false
                this.playAudio("audioPlay");
            }
        }, 2000),
        // 获取未学数组
        async getWordUnit() {
            const params = {
                id: this.checkedData.id_2,
                classify: 1
            }
            const { data } = await getWordUnit(params)
            this.groupList = data.filter(item => item.is_finish == 0)
            if (this.groupList.length > 0) {
                this.getReadWordList(this.groupList[this.groupIndex].id)
            } else {
                this.$alert('该词组已学习完毕返回学习中心', '提示', {
                    confirmButtonText: '确定',
                    callback: (action) => {
                        this.$goRouter('naturalSpellCenter', this.$route.query)
                        console.log(action);
                    }
                });
            }

        },
        // 获选定未学词组
        async getReadWordList(id) {
            const params = {
                id,
                classify: 1
            }
            const { data } = await getReadWordList(params)
            this.wordList = data
            this.currentWord = this.wordList[this.currentIndex]
            await this.$nextTick();
            this.playAudio("audioPlay");
        },
        onIsPlayWord(isPlay) {
            this.isPlay = isPlay;
        },
        playAudio(refName) {
            if (this.$refs[refName]) {
                this.$refs[refName].playAudio();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.natural_readWord {
    background: url("~@/assets/img/naturalSpell/read_word.png") no-repeat;
    background-position: center;

    .natural_readWord_center {
        .natural_readWord_content {
            margin: 30px auto 0;
            background: url("~@/assets/img/naturalSpell/read_word_center.png");
            background-size: 1040px 637px;
            width: 1040px;
            height: 637px;

            .title {
                padding-top: 6px;
                position: relative;
                text-align: center;
                font-size: 32px;
                line-height: 66px;
                color: #FFFFFF;

                .feedback {
                    position: absolute;
                    right: 46px;
                    text-align: center;
                    font-size: 20px;
                    cursor: pointer;
                }
            }

            .content {
                margin: 19px auto 0;
                width: 954px;
                display: flex;

                .soundmark {
                    width: 230px;
                    padding: 53px 0 0 92px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #6B5131;

                    img {
                        width: 24px;
                        height: 21px;
                    }
                }

                .demo {
                    flex: 1;
                    padding-top: 75px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .topic {
                        height: 145px;
                    }

                    .soundmark_content {
                        padding: 21px 0 14px;
                        font-size: 26px;
                        font-weight: 400;
                        color: #6B5131;

                        .soundmark_demo {
                            padding-right: 12px;
                        }

                        img {
                            cursor: pointer;
                            width: 38px;
                            height: 33px;
                        }
                    }

                    .word_text {
                        font-size: 21px;
                        font-weight: 400;
                    }
                }

                .btn_group {
                    text-align: right;
                    width: 230px;
                    height: 163px;
                    padding-top: 200px;
                    padding-right: 91px;

                    .btn_no {
                        cursor: pointer;
                        margin-top: 17px;
                    }

                    img {
                        cursor: pointer;
                        width: 139px;
                        height: 73px;
                    }

                    .number {
                        position: relative;
                        left: 0;
                        top: 0;

                        img {
                            width: 76px;
                            height: 77px;
                            cursor: pointer;
                        }

                        .text {
                            position: absolute;
                            right: 32px;
                            top: 20px;
                            color: #ffff;
                            font-size: 30px;
                        }
                    }

                }
            }

            .footer {
                margin: 19px auto 0;
                width: 954px;
                display: flex;

                .text {
                    padding-left: 55px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #6B5131;
                    line-height: 22px;
                }

                .img {
                    img {
                        cursor: pointer;
                        width: 28px;
                        height: 26px;
                    }
                }
            }

        }
    }
}
</style>